<!DOCTYPE html>
<html>
<head>
	<title>svg学习</title>
	<script src="js/vue/vue.min.js"></script>
	<style>
		.container{
			width:640px;
			margin:10px auto;
		}
		.container .box{
			height:360px;
			background-image:url('./img/girl001.jpg');
			background-repeat: no-repeat;
			background-size:100% 100%;
			position: relative;
			border:1px solid #ccc;
		}
		.container .box .point{
			position: absolute;
			width:6px;
			height:6px;
			border:1px solid #ccc;
			background: #fff;
			transform: translateX(-50%) translateY(-50%);
		}
		/* 控制台样式 */
		.container .console{
			position: absolute;
			left:10px;
			top:10px;
		}
		/* 主菜单 */
		.container .console .menu .ul{
			list-style: none;
			width:30px;
			border:2px solid #ccc;
			border-radius: 4px;
			margin-bottom:10px;
			overflow: hidden;
		}
		.container .console .menu .ul:last-child{
			margin-bottom:0;
		}
		.container .console .menu .ul .li{
			list-style: none;
			height: 30px;
			border-bottom:1px solid #ccc;
			cursor: pointer;
			background: #fff;
			background-image: url('./img/spritesheet.svg');
		    background-repeat: no-repeat;
    		background-size: 300px 30px;
    		display: flex;
			justify-content: center;
			align-content: center;
			font-size: 20px;
		}
		.container .console .menu .ul .li:last-child{
			border:none;
		}
		.container .console .menu .ul .li.in{
			background-position: 30px 0px;
		}
		.container .console .menu .ul .li.out{
			background-position: 30px 0px;
		}
		.container .console .menu .ul .li.polyline{
			background-position: 0px 0px;
		}
		.container .console .menu .ul .li.polygon{
			background-position: -30px 0px;
		}
		.container .console .menu .ul .li.rectangle{
			background-position: -60px 0px;
		}
		.container .console .menu .ul .li.circle{
			background-position: -90px 0px;
		}
		.container .console .menu .ul .li.marker{
			background-position: -120px 0px;
		}
		.container .console .menu .ul .li.circlemarker{
			background-position: -270px 0px;
		}
		.container .console .menu .ul .li.edit{
			background-position: -210px 0px;
		}
		.container .console .menu .ul .li.delete{
			background-position: -180px 0px;
		}
		/* 子菜单 */
		.container .console .child-menu.ul{
			position: absolute;
			left:34px;
			top:108px;
			border-radius: 0 4px 4px 0;
    		white-space: nowrap;
    		overflow: hidden;
		}
		.container .console .child-menu.ul .li{
			display: inline-block;
			padding:0px 6px;
			font-size:12px;
			color:#fff;
			border-left:1px solid #fff;
			background:rgba(0, 0, 0, 0.5);
			white-space: nowrap;
			margin-left:-5px;
			cursor: pointer;
			line-height:30px;
		}
		.container .console .child-menu.ul .li:first-child{
			border-left:0;
			padding-left:11px;
		}
	</style>
</head>
<body>
	<div class="container" id="container">
		<div class="box" 
			@mousewheel="boxMouseWheel" 
			@mousedown="boxMouseDown"
			@mousemove="boxMouseMove"
			@mouseup="boxMouseUp"
			@click="boxClick"
			:style="{backgroundSize:boxBgStyle.width + '% '+ boxBgStyle.height +'%', backgroundPosition:boxBgStyle.left + 'px ' + boxBgStyle.top + 'px'}"
		>
			<div class="console">
				<div class="menu">
					<div class="ul">
						<div class="li in">+</div>
						<div class="li out">-</div>
					</div>
					<div class="ul">
						<div class="li polyline"></div>
						<div class="li polygon" @click.stop="alterActive"></div>
						<div class="li rectangle"></div>
						<div class="li circle"></div>
						<div class="li marker"></div>
						<div class="li circlemarker"></div>
					</div>
					<div class="ul">
						<div class="li edit"></div>
						<div class="li delete"></div>
					</div>
				</div>
				<div class="child-menu ul" v-if="isActive">
					<div class="li" @click="completeProcess">完成</div>
					<div class="li" @click="deletePoint">删除节点</div>
					<div class="li" @click="cancelProcess">取消</div>
				</div>
			</div>
			<template v-if="provessData">
				<template v-for="(point, index) in provessData.p">
					<div class="point" :style="{left:point.x + 'px', top: point.y + 'px'}" @click.stop="pointClick(index)"></div>
				</template>
			</template>
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="360">
				<template v-for="item in completeData">
					<g><path :d="item.d" fill="lime" fill-opacity="0.1" stroke="lime" stroke-width="2"/></g>
				</template>
				<g v-if="provessData"><path :d="provessData.d" fill="lime" fill-opacity="0.1" stroke="lime" stroke-width="2"/></g>
			</svg>
		</div>
		<div class="test" style="height:100px;background:red;"></div>
	</div>
</body>
</html>
	
<script>
	var vm = new Vue({
		el: '#container',
		data:{
			boxInitData:{
				width: 640,
				height: 360,
			},
			boxBgStyle:{
				width: 100,
				height: 100,
				left: 0,
				top: 0,
			},
			isMouseDown:false,
			mouseDownPosition:{
				x: null,
				y: null,
			},
			mouseDownBoxBgPosition:{
				x: null,
				y: null,
			},
			isActive:false,
			isProcess:false,
			completeData:[
				// {
				// 	p:[{x:150, y:0}, {x:75, y:200}, {x:225, y:200}],
				// 	d:'M150 0 L75 200 L225 200 Z',
				// },
			],
			provessData:null,
		},
		methods:{
			/***************************** 图片缩放、拖动 start ***********************************/
			boxMouseWheel: function(e){
				let unitNum = 4;
				let width = this.boxBgStyle.width;
				let height = this.boxBgStyle.height;
				let offsetX = (this.boxInitData.width * unitNum / 100);
				let offsetY = (this.boxInitData.height * unitNum / 100);
				if(e.wheelDelta < 0){
					width -= unitNum;
					height -= unitNum;
					offsetX *= -1;
					offsetY *= -1;
				}else{
					width += unitNum;
					height += unitNum;
				}
				if(width > 100 && height > 100){
					let percentX = (e.clientX - this.boxBgStyle.left) / (this.boxInitData.width * width / 100);
					let percentY = (e.clientY - this.boxBgStyle.top) / (this.boxInitData.height * height / 100);
					percentX = percentX.toFixed(4);
					percentY = percentY.toFixed(4);
					let left = this.boxBgStyle.left - offsetX * percentX;
					let top = this.boxBgStyle.top - offsetY * percentY;
					this.boxBgStyle.width = width;
					this.boxBgStyle.height = height;
					this.boxBgStyle.left = left;
					this.boxBgStyle.top = top;
				}
			},
			boxMouseDown: function(e){
				this.isMouseDown = true;
				this.mouseDownPosition = {
					x: e.clientX,
					y: e.clientY,
				}
				this.mouseDownBoxBgPosition = {
					x: this.boxBgStyle.left,
					y: this.boxBgStyle.top,
				}
			},
			boxMouseUp: function(){
				this.isMouseDown = false;
				this.mouseDownPosition = {
					x: null,
					y: null,
				}
				this.mouseDownBoxBgPosition = {
					x: null,
					y: null,
				}
				if(this.boxBgStyle.width <= 110){
					if(this.boxBgStyle.left != 0 || this.boxBgStyle.top != 0){
						this.boxBgStyle.left = 0;
						this.boxBgStyle.top = 0;
					}
				}
			},
			boxMouseMove: function(e){
				if(this.isMouseDown){
					let left = (this.mouseDownBoxBgPosition.x + e.clientX - this.mouseDownPosition.x);
					let top = (this.mouseDownBoxBgPosition.y + e.clientY - this.mouseDownPosition.y);
					this.boxBgStyle.left = left;
					this.boxBgStyle.top = top;
				}
			},
			/***************************** 图片缩放、拖动 end ***********************************/
			/***************************** 绘制多边形 start ***********************************/
			alterActive: function(){
				console.log(1);
				if(!this.isProcess){
					this.isActive = !this.isActive;
				}
			},
			completeProcess: function(){
				if(!this.provessData){
					return;
				}
				if(this.provessData.p.length <= 2){
					return;
				}
				//闭合路径
				this.provessData.d += ' Z';
				this.completeData.push(this.provessData);
				this.provessData = null;
				this.isProcess = false;
				this.isActive = false;
			},
			deletePoint: function(){
				if(!this.provessData){
					return;
				}
				if(this.provessData.p.length == 0){
					return;
				}
				this.provessData.p.pop();
				let d = '';
				this.provessData.p.forEach(function(point, index){
					let commend = index ? 'L' : 'M';
					d += commend + point.x + ' ' + point.y;
				})
				//d += ' Z';
				this.provessData.d = d;
			},
			cancelProcess: function(){
				this.isProcess = false;
				this.isActive = false;
				this.provessData = null;
			},
			boxClick: function(e){
				if(!this.isActive){
					return;
				}
				if(!this.isProcess){
					this.isProcess = true;
					this.provessData = {p:[], d:''}
				}
				if(this.isProcess){
					this.provessData.p.push({x: e.offsetX, y:e.offsetY});
					let d = '';
					this.provessData.p.forEach(function(point, index){
						let commend = index ? 'L' : 'M';
						d += commend + point.x + ' ' + point.y;
					})
					//d += ' Z';
					this.provessData.d = d;
				}
			},
			pointClick: function(index){
				if(!this.provessData){
					return;
				}
				if(this.provessData.p.length <= 2){
					return;
				}
				if(index != 0){
					return;
				}
				//闭合路径
				this.provessData.d += ' Z';
				this.completeData.push(this.provessData);
				this.provessData = null;
				this.isProcess = false;
				this.isActive = false;
			},
			/***************************** 绘制多边形 end ***********************************/
		},
		filters:{
			
		},
		computed:{
			
		},
		watch:{
			
		}
	})
</script>